<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			购买停车包月
		</view>
		<view class="show">
			<view class="sone">
				<view class="sonetap">
					<view class="stapone">
						<view class="staponeleft">{{list.projectName}}</view>
						<view class="staponeright" @click="xgbtn">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//xiugai.png"></image>
						</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">用户姓名:{{list.realName}}</view>
						<view class="staptworight">基本账户:{{list.realBalance}} 元</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">用户编号:{{list.id}}</view>
						<view class="staptworight">赠送账户:{{list.dummyBalance}} 元</view>
					</view>
					<!-- <view class="staptwo">
						<view class="staptwoleft">包月期限：<span v-if="list.endTime">{{list.endTime}}</span>
							<span v-else>无</span>
						</view>
						<view class="staptworight" v-show="list.monthlyType=='A1'||list.monthlyType=='A3'||list.monthlyType=='A4'||list.monthlyType=='A6'">剩余：
							<span v-if="list.monthlyType=='A1'||list.monthlyType=='A4'">{{list.num}}小时</span>
							<span v-else-if="list.monthlyType=='A3'||list.monthlyType=='A6'">{{list.num}}次</span>
							<span v-else>0</span>
						</view>
						<view class="staptworight" v-show="list.monthlyType=='A5'||list.monthlyType=='A7'">剩余：
							<span v-if="list.monthlyType=='A5'">{{list.num}}小时</span>
							<span v-else-if="list.monthlyType=='A7'">{{list.num}}次</span>
							<span v-else>0</span>
						</view>
					</view> -->
				</view>
			</view>
			
			<view class="newtap">
				<view class="newone" v-if="userPackages.length>0">
					<view class="newonetap" style="color: red;">
						当前套餐：
						<view>
							<view v-for="(item,index) in userPackages" :key="index" style="margin-top: 20upx;">
								<view style="display: flex;">
									<view style="color:#50a1f3;margin-right: 20upx;">{{item.typesName}}({{item.nums}}期)</view>
									<view>购买日期：{{item.createTime}}</view>
								</view>
								<view style="display: flex;">
									有效期：{{item.startTime}} ~ {{item.endTime}}
								</view>
							</view>
						</view>
						
					</view>
				</view>
				<view class="newone" v-else>
					<view class="newonetap" style="color: red;">
						当前套餐：暂未购买包月套餐
					</view>
				</view>

				<view class="newone" >
					<view class="newtwotap" v-for="(item,index) in tclist" :key="index">
						<view class="newtwotapsun">
							{{item.typesName}}
						</view>
						<view class="newtwotapbtn" @click="gotc(item.id,item.disMsg,item.price)">购买</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	// import {
	// 	Dialog
	// } from 'vant';
	export default {
		components: {},
		mounted() {

		},

		data() {
			return {
				tclist:[],
				userPackages:[],
				id: '', //用户ID
				list:{}
				
				
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.show()
			this.monthly();
		},
		methods: {
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			
			pad(num, n) {
				var len = num.toString().length;
				while (len < n) {
					num = "0" + num;
					len++;
				}
				return num;
			},
			//获取用户信息
			show() {
				this.$base.request('user/info' + '/' + this.id, 'GET')
					.then(res => {
						this.list = res.data.data
						this.list.id = this.pad(this.list.id, 8)
					})
					.catch(err => {

					})
			},
			//跳转修改页面
			xgbtn() {
				uni.navigateTo({
					url: '/pages/modify_user_information/modify_user_information?id=' + this.id + '&realName=' +
						this.list.realName +
						'&phone=' + this.list.phone,
				});
			},
			//获取包月数据
			monthly() {
				let data={
					userId: this.id	
				}
				this.$base.request('recharge/parkingPackage', 'GET', data)
					.then(res => {
						if(res.data.code==200){
							this.tclist=res.data.data.parkingPackages
							this.userPackages=res.data.data.userPackages
						}else {
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
				
					})
			},
			gotc(id,disMsg,price){
				uni.navigateTo({
				       url: '/pages/admin_monthlystop/admin_monthlystop?packageId=' + id+ '&disMsg=' +disMsg+ '&price=' +price+ '&userId=' +this.id
				});
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		/deep/.van-overlay{
			z-index: 980!important;
		}
		/deep/.van-popup{
			z-index: 981!important;
		}
		
		.hand {
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;

			image {
				width: 22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}

		.show {
			width: 100%;
			box-sizing: border-box;

			.tapthree {
				margin-top: 16upx;

				.tphand {
					font-size: 32upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
				}

				.tpfoot {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #4b98ed;
					margin-top: 10upx;
				}

				/deep/.van-collapse {
					background-color: #F5F5F5;
				}

				/deep/.van-collapse-item {
					margin-top: 22upx;
				}

				/deep/.van-collapse-item__content {
					padding: 0 30upx;
				}

				/deep/.van-cell {
					align-items: center;
				}

				.showtap {
					width: 100%;
					box-sizing: border-box;

					.stone {
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #666666;
						line-height: 48upx;
						padding-bottom: 38upx;
						border-bottom: 1upx solid #d1d1d1;
					}

					.stwo {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 23upx 0;

						/deep/.van-stepper__input {
							color: #F078CE;
						}

						border-bottom: 1upx solid #d1d1d1;

						.stright {
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;
							display: flex;
							align-items: center;

							.srtxt {
								margin-right: 28upx;
							}

							.srbtn {
								width: 151upx;
								height: 64upx;
								border-radius: 8upx;
								background-color: #4B98ED;
								text-align: center;
								line-height: 64upx;
								font-size: 28upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #ffffff;
							}
						}
					}
				}

			}

			.newtap {
				width: 100%;
				padding: 10upx 35upx;
				box-sizing: border-box;

				.newone {
					width: 100%;
					box-sizing: border-box;
					border-radius: 16upx;
					box-shadow: 0upx 6upx 8upx 4upx rgba(4, 4, 4, 0.1);
					background-color: #FFFFFF;
					margin: 0 auto;
					margin-top: 20upx;

					.newonetap {
						font-size: 20upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #50a1f3;
						align-items: center;
						padding: 20upx;
						box-sizing: border-box;
					}

					.newtwotap {
						align-items: center;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						padding: 20upx;
						box-sizing: border-box;
						border-bottom: 1upx solid #e8e8e8;

						.newtwotapsun {
							font-size: 28upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #6c6c6c;
						}

						.newtwotapbtn {
							width: 120upx;
							background-color: #4b98ed;
							color: #FFFFFF;
							border-radius: 10upx;
							text-align: center;
							padding: 10upx 0;
							font-weight: 700;
							font-size: 25upx;
						}
					}

				}
			}
			.tan1 {
				width: 686upx;
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 25upx 32upx;
			
				image {
					align-items: center;
					margin: 0 auto;
					width: 630upx;
					height: 700upx;
				}
				.tanhand {
					font-size: 32upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					text-align: center;
					color: #333333;
					margin-bottom: 40upx;
					position: relative;
				
					image {
						width: 25upx;
						height: 25upx;
						position: absolute;
						top: 5upx;
						right: 18upx;
					}
				}
				
				.tanone {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					line-height: 45upx;
				
				}
				.stwotap {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20upx 0;
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					// color: #D0D0D0;
				
					/deep/.van-stepper__input {
						color: #4b98ed;
					}
				}
				.tanonedibu {
					width: 100%;
					display: flex;
					.dbleft {
						width: 40%;
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						padding: 20upx 0;
						color: #666666;
						background-color: #E5E5E5;
						border-radius: 36upx;
						margin: 20upx auto;
					}
					.dbright2 {
						width: 40%;
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						padding: 20upx 0;
						color: #FFFFFF;
						background: #4b98ed;
						border-radius: 36upx;
						margin: 20upx auto;
					}
				}
			
			}

			.sone {
				width: 100%;
				height: 164upx;
				background-color: #4B98ED;
				position: relative;
				margin-bottom: 116upx;

				.sonetap {
					width: 683upx;
					height: 219upx;
					border-radius: 16upx;
					box-shadow: -1upx 5upx 10upx 0upx rgba(22, 22, 22, 0.27);
					position: absolute;
					background-color: #FFFFFF;
					top: 43upx;
					left: 50%;
					margin-left: -341.5upx;

					.stapone {
						width: 100%;
						box-sizing: border-box;
						padding: 26upx 33upx;
						position: relative;

						.staponeleft {
							font-size: 32upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.staponeright {
							width: 101upx;
							height: 50upx;
							border-radius: 25upx 0upx 0upx 25upx;
							text-align: center;
							background-color: #4B98ED;
							position: absolute;
							bottom: 0upx;
							right: 0upx;
							box-sizing: border-box;
							padding-top: 7upx;
							padding-left: 17upx;

							image {
								width: 37upx;
								height: 36upx;
							}
						}
					}
				}

				.staptwo {
					width: 100%;
					box-sizing: border-box;
					padding-left: 27upx;
					padding-bottom: 5upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					display: flex;

					.staptwoleft {
						width: 50%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.staptworight {
						width: 50%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.sthree {
				margin-top: 160upx;

				.tphand {
					font-size: 32upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
				}

				.tpfoot {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #4b98ed;
					margin-top: 10upx;
				}

				/deep/.van-collapse {
					background-color: #F5F5F5;
				}

				/deep/.van-collapse-item {
					margin-top: 22upx;
				}

				/deep/.van-collapse-item__content {
					padding: 0 30upx;
				}

				/deep/.van-cell {
					align-items: center;
				}

				.showtap {
					width: 100%;
					box-sizing: border-box;

					.stone {
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #666666;
						line-height: 48upx;
						padding-bottom: 38upx;
						border-bottom: 1upx solid #d1d1d1;
					}

					.stwo {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 23upx 0;

						/deep/.van-stepper__input {
							color: #F078CE;
						}

						border-bottom: 1upx solid #d1d1d1;

						.stright {
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;
							display: flex;
							align-items: center;

							.srtxt {
								margin-right: 28upx;
							}

							.srbtn {
								width: 151upx;
								height: 64upx;
								border-radius: 8upx;
								background-color: #4B98ED;
								text-align: center;
								line-height: 64upx;
								font-size: 28upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #ffffff;
							}
						}
					}
				}
			}

			.sfour {
				width: 686upx;
				height: 88upx;
				border-radius: 8upx;
				background-color: #4B98ED;
				margin: 0 auto;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				line-height: 88upx;
				margin-top: 176upx;
				color: #ffffff;
			}
		}

	}
</style>
